<template>
  <div class="refunds">
    <!-- 列表查找 -->
    <div class="clearfloat mb10">
      <orderStatistics class='fl' :myInfo ='myInfo' :roleID='$store.state.user.role_id'  @getData='getTableData'/>
      <div class="search-wrap fr">
        <table-search
            ref="table-search"
            :selectHead="selectHead"
            @searchMethods="searchMethods">
        </table-search>
      </div>
    </div>


    <el-table
      ref="tableRef"
      :data="tableData"
      border
      style="width: 100%"
      v-loading="loading"
      @sort-change='tableSortChange'
      height="88%">
      <el-table-column show-overflow-tooltip label="ID" min-width="60" align="left">
        <template slot-scope="scope">{{(scope.$index+1)+(currentPage-1)*pageSize }}</template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="订单编号" align="left" prop='order_number' sortable='custom' min-width="200">
        <template slot-scope='scope'>
					<span>
						{{ scope.row.final ? scope.row.final.order_number : scope.row.order_number }}
					</span>
				</template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="liaisons" label="申请人" min-width="100" align="left" sortable>
				<template slot-scope="scope">
					<template v-if="scope.row.final">
						{{ scope.row.final.order ?  scope.row.final.order.liaisons : '' }}
					</template>
				</template>
			</el-table-column>
      <el-table-column show-overflow-tooltip prop="liaisons_tel" label="手机号码" min-width="130" align="left" sortable >
				<template slot-scope="scope">
					<template v-if="scope.row.final">
						{{ scope.row.final.order ?  scope.row.final.order.liaisons_tel : '' }}
					</template>
				</template>
			</el-table-column>
      <el-table-column show-overflow-tooltip prop="liaisons_email" label="邮箱" min-width="180" align="left" sortable >
				<template slot-scope="scope">
					<template v-if="scope.row.final">
						{{ scope.row.final.order ?  scope.row.final.order.liaisons_email : '' }}
					</template>
				</template>
			</el-table-column>
      <el-table-column show-overflow-tooltip prop="channel" label="付款渠道" min-width="120" align="left" sortable='custom'></el-table-column>
			<el-table-column show-overflow-tooltip prop="invoice_number" label="发票编号" min-width="180" align="left" sortable='custom' ></el-table-column>
			<el-table-column show-overflow-tooltip prop="money" label="开票金额(元)" min-width="140" align="left" sortable='custom'> </el-table-column>
			<el-table-column show-overflow-tooltip prop="refund_info" label="退款渠道" min-width="120" align="left" sortable='custom'>
				<template slot-scope="scope">
					<span v-if="scope.row.refund_info == '原路退回'"> {{ scope.row.refund_info }} </span>
				</template>
			</el-table-column>
			<el-table-column show-overflow-tooltip  prop="reimbursement" label="退款凭证号" min-width="130" align="left" sortable></el-table-column>
      <el-table-column
        label="退款凭证"
        min-width="120"
        align="left"
        class-name="pay-status"
        sortable='custom'
        prop="reimbursement_image">
        <template slot-scope="scope">
          <div @click.stop style="height: 40px">
            <el-image
              v-if="scope.row.reimbursement_thumbnail_image != null"
              :src="scope.row.reimbursement_thumbnail_image"
              :preview-src-list="[scope.row.reimbursement_image]"
            ></el-image>
          </div>
        </template>
      </el-table-column>
			<el-table-column show-overflow-tooltip prop="refund_info.card" label="银行卡号" min-width="160" align="left" sortable></el-table-column>
			<el-table-column show-overflow-tooltip prop="refund_info.name" label="持卡人姓名" min-width="130" align="left" sortable></el-table-column>
			<el-table-column show-overflow-tooltip prop="refund_info.bank" label="银行卡支行" min-width="150" align="left" sortable></el-table-column>
			<el-table-column show-overflow-tooltip prop="refund_at" label="退款时间" min-width="120" align="left" sortable='custom'></el-table-column>
			<el-table-column show-overflow-tooltip prop="updated_at" label="更新时间" min-width="180" align="left" sortable='custom'></el-table-column>
      <el-table-column v-if="this.$store.state.user.role_id == 4" fixed="right" align="center" width="120" label='操作'>
				<template slot-scope="scope">
					<el-button :disabled="scope.row.refund == ''|| scope.row.refund == null || scope.row.refund=='退款成功' || ( scope.row.final.order && ($store.state.user.id !== scope.row.process_id))" type="danger" size="small" @click="refundInvoice(scope.row)" v-no-more-click:3000>确认退款</el-button>
				</template>
			</el-table-column>
    </el-table>

    <pagination @paginationChange="paginateChange" :total="total"></pagination>
    <confirmRefund ref="confirmRefund" @refresh='getTableData'></confirmRefund>
  </div>
</template>

<script>

import Pagination from '~/components/pagination'
import tableSearch from '~/components/tableSearch'
import { getMyInfo } from "~/api/user"
import orderStatistics from "~/components/orderStatistics"
import confirmRefund from "./components/confirmRefunds"
export default {
  data () {
    return {
      tableData: [],
      loading: false,
      pageSize: 25, //一页可以几条
      currentPage: 1, //目前在第几页
      current_page: 0,
      tableSize: 25, //一页几条
      total: 0,
      paramsByinvoice: {
        status: '开票成功',
        refund: '等待退款,退款成功'
      },
      myInfo: {
        can_refund_total : 0,
        can_refund_process_total: 0,
        refunded_total: 0
      },
      selectHead: [
        {
          label: '订单编号',
          props: 'order_number'
        },
        {
          label: '申请人',
          props: 'liaisons'
        },
        {
          label: '手机号码',
          props: 'liaisons_tel'
        },
        {
          label: '邮箱',
          props: 'liaisons_email'
        },
        {
          label: '付款渠道',
          props: 'channel'
        },
        {
          label: '发票编号',
          props: 'invoice_number'
        },
        {
          label: '开票金额',
          props: 'money'
        },
        {
          label: '退款渠道',
          props: 'refund_info'
        },
        {
          label: '退款凭证号',
          props: 'reimbursement'
        },
        {
          label: '银行卡号',
          props: 'card'
        },
        {
          label: '持卡人姓名',
          props: 'name'
        },
        {
          label: '银行卡支行',
          props: 'bank'
        },
        {
          label: '退款时间',
          props: 'refund_at'
        },
        {
          label: '更新时间',
          props: 'updated_at'
        },

      ],
      search_params: {},
      baseUrl: global.baseurl,
    }
  },
  components: {
    Pagination,
    tableSearch,
    orderStatistics,
    confirmRefund
  },
  created () {
    this.getTableData()
  },
  methods: {
    async getMyinfo (params) {
      let myInfo = await getMyInfo(this.$axios, params);
      if (myInfo.data.status == 'success') {
        this.$store.commit("setRoleInfo",myInfo.data.data)
        this.$store.commit("setUser",myInfo.data.data)
        this.myInfo = myInfo.data.data
      }
    },
    getTableData (args) {
      let params = {
        perPage: this.pageSize,
        page: this.currentPage,
      }
      params = {...params, ...this.paramsByinvoice, ...this.search_params}
      if (args) {
        params = {...params, ...args}
        // this.paramsByinvoice = params
      }
      this.$axios.get('api/invoice', {
        params: params
      }).then(res => {
        if (res.data.code == 200) {
          this.loading = false
          this.tableData = res.data.data
          this.pageSize = res.data.page.per_page
          this.tableSize = res.data.page.current_page
          this.total = res.data.page.total
          this.getMyinfo()
          //  // 重绘表格解决错位问题
          // this.$nextTick(()=>{
          //   this.$refs.tableRef.doLayout()
          // })
        } else {
          this.$message.error('服务器繁忙')
        }
      })
    },
    searchMethods(params, no_search) {
      // this.sort_params = {}
      this.currentPage = 1
      this.pageSize = 25
      this.search_params = params
      if (params.refund_at) {
        this.search_params.refund_start_time = params.refund_at[0]
        this.search_params.refund_end_time = params.refund_at[1]
        delete this.search_params.refund_at
      }
      if (params.updated_at) {
        this.search_params.updated_start_time = params.updated_at[0]
        this.search_params.updated_end_time = params.updated_at[1]
        delete this.search_params.updated_at
      }
      if (!no_search) {
          this.getTableData()
      }
    },
    paginateChange(params) {
      this.pageSize = params.perPage
      this.currentPage = params.page
      this.getTableData()
    },
    tableSortChange (column) {
      if (column.order === 'descending') {
        this.paramsByinvoice.sort_str = column.prop
        this.paramsByinvoice.sort_order = 'desc'
      } else if (column.order === 'ascending'){
        this.paramsByinvoice.sort_str = column.prop
        this.paramsByinvoice.sort_order = 'asc'
      } else {
        delete this.paramsByinvoice.sort_str
        delete this.paramsByinvoice.sort_order
      }
      this.loading = true
      this.currentPage = 1
      this.getTableData()
    },

    // 退款
    refundInvoice(row) {
      this.$refs['confirmRefund'].showOn(row)
    },

  },
  watch: {
    tableData: {
      handler: function(val) {
        val.forEach(v => {
          if (v.reimbursement_image) {
            v.reimbursement_image = this.baseUrl + '/storage/upload/' + v.reimbursement_image
          }
          if (v.reimbursement_thumbnail_image) {
            v.reimbursement_thumbnail_image = this.baseUrl + '/storage/upload/' + v.reimbursement_thumbnail_image
          }
        })
      },
      immediate: true
    },
  }
}
</script>

<style lang='less' type='text/css' scoped>
  .refunds {
    height: 100%; //撑满表格
    .withdraw-header {
      margin-bottom: 20px;
    }
    .el-table {
      width: 99.9% !important;
    }
  }
</style>
